<script setup>
	import {ref, reactive} from 'vue'
	import {GetGroup, Delete} from '^/menu'
	import {ElMessageBox, ElMessage} from 'element-plus'



	const viewData = reactive({
		pageData: [],
		page: {
			current: 1,
			size: 10
		},
		total: 0,

		searchForm: {}
	})


	
	const initData = () => {

		const params = {
			...viewData.searchForm,
			...viewData.page
		}
		GetGroup(params).then(res => {
			// viewData.pageData = res.data.records
			// viewData.total = res.data.total
			viewData.pageData = res.data.pageData.records
			viewData.total = res.data.pageData.total
		})
	}
	initData()

	const handleChangeCurrent = (val) => {
		viewData.page.current = val
		initData()
	}

	const delHandle = (id) => {
		ElMessageBox.confirm(
				'确认删除该菜单吗?', '警告',
				{confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',}
		).then(() => {
			Delete(id).then(res => {
				ElMessage({message: '操作成功', type: 'success'})
				initData()
			})
		})
	}

	import Edit from './edit.vue'

	const editDialog = ref(false)
	const editRef = ref(null)
	const editHandle = (id) => {
		editDialog.value = true
		editRef.value.init(id)
	}

	const closeHandle = (hasChange) => {
		console.log('xxxxxxxxxxxx  刷新数据............')
		editDialog.value = false
		if (hasChange) {
			initData()
		}
	}

</script>

<template>
	<div>
		<el-form :inline="true">
			<el-form-item>
				<el-button type="primary" @click="editHandle(null)">新增</el-button>
			</el-form-item>
		</el-form>

		<el-table
				:data="viewData.pageData"
				style="width: 100%;margin-bottom: 20px;"
				row-key="id"
				border
				stripe
				default-expand-all>

			<el-table-column prop="groupId" label="组别ID" sortable width="180"></el-table-column>
			<el-table-column prop="groupName" label="组别名称" sortable width="180"></el-table-column>
			<el-table-column prop="groupArea" label="组别地址"></el-table-column>
	
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-button type="text" @click="delHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>


		
		<el-pagination background layout="total, prev, pager, next"
		               :total="viewData.total"
		               :page-size="viewData.page.size"
		               @current-change="handleChangeCurrent"
		               style="margin-top: 15px"/>

	</div>

	<Edit ref="editRef" :showDialog="editDialog" :tableData="viewData.tableData" @closeHandle="closeHandle"></Edit>

</template>